<template>
  <div class="hello">
    <h1>{{ msg}}</h1>
    <div @click="gohome"> go home</div>
    <div @click="gologin"> go login</div>
    <div @click="goAjax"> Ajax</div>
    <ul v-DomWidth class="img_class">
      <li v-for="(item,index) in materialList" :key="index">
        <img v-lazy="item.originalImagePath"  alt="">
      </li>
    </ul>
    <ul class="img_class">
      <li v-lazy:background-image="item.originalImagePath" v-for="(item,index) in materialList" :key="index" >
      </li>
    </ul>
    <van-button @click="ok" type="default">组件传递隐藏</van-button>
    <van-button @click="showToast" type="primary">toast封装</van-button>
    <van-button type="danger">危险按钮</van-button>
    <test-api @isShows="isShow=false" :isSh="isShow" v-if="isShow"></test-api>
  </div>
</template>

<script>
import Vue from 'vue'
import toast from './Toast/toast' // 引入toast函数
import {DomWidth} from '@/directive'
import Api from '../axios/api/order'
import coupon from '../axios/api/coupon'
import {Toast} from 'vant'
import Test from './Test'
import filter from '@/filter'

Vue.prototype.$toast = toast // 给Vue对象添加$toast方法
export default {
  name: 'HelloWorld',
  data() {
    return {
      isShow: false,
      msg: 'Welcome to Your Vue.js App',
      materialList: []
    }
  },
  methods: {
    showToast() {
      this.$toast('新内容', 2000) // 现在就可以调用了
    },
    ok() {
      this.isShow = true
    },
    gohome() {
      this.$router.push({path: 'home'})
    },
    gologin() {
      this.$router.push({path: 'login'})
    },
    goAjax () {
      coupon.coupon.couponchelue().then(res => {
        console.log(res)
        this.materialList = res.data.data.materialList
      })
    }
  },
  components: {
    'test-api': Test
  },
  mounted() {
    Toast('我是提示文案，建议不超过十五字~')
    Api.orderList({}).then(res => {
      console.log(res)
    }, () => {
      console.log('获取失败')
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
  /*img[lazy="loading"] {*/
    /*width: 10pxkey*/
    /*height: 10px !importantkey*/
  /*}*/
  .hello{
    background: #ccc;
    .img_class img{
      height: 60px;
    }
    h1{
     font-size: 60px;
    }
  }
  .img_class li{
    height: 60px;
    width: 100px;
    background-repeat: no-repeat;
    background-size: cover;
  }
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
